<%@ page import="cn.entity.Staff,java.util.List"
         pageEncoding="UTF-8"
         contentType="text/html; charset=utf-8" %>
<%@ page import="cn.entity.Staff" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>公司员工一览表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        /* 模糊搜索部分样式 */
        form[action="searchEmp"] {
            margin-bottom: 20px;
        }

        input[type="text"][name="keyword"] {
            padding: 8px;
            width: 200px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-right: 10px;
            font-size: 16px;
        }

        input[type="submit"][value="搜索"] {
            padding: 8px 20px;
            border-radius: 5px;
            border: none;
            background-color: #0000FF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 16px;
        }

        input[type="submit"][value="搜索"]:hover {
            text-decoration: underline;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-image: url('images/R.jpg');
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }


        #header {
            text-align: left;
            font-size: 25px;
            font-weight: bold;
            color: #fff;
            background-color: #104E8B;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
        }

        #sidebar {
            display: flex;
            padding: 0;
            box-sizing: border-box;
        }

        #sidebar a {
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            color: black;
            padding: 10px 40px;
        }

        #sidebar a:hover {
            background-color: #FFEFDB;
        }

        #sidebar a.active {
            background-color: #98FB98;
        }

        #wrap {
            margin-left: 0;
            margin-top: 20px;
            padding: 20px;
            height: 100vh;
        }

        #content {
            padding: 20px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 40px;
        }

        .table_header {
            background-color: #e0e0e0;
            font-weight: bold;
        }

        .table td, .table th {
            padding: 8px;
            border: 1px solid white;
            text-align: left;
        }

        .row1 {
            background-color: white;
        }

        .button {
            padding: 8px 20px;
            border-radius: 5px;
            border: none;
            background-color: #0000FF;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 16px;
        }

        .button:hover {
            text-decoration: underline;
        }

        .operation-links a:first-child {
            background-color: #A020F0;
            border-radius: 3px;
            padding: 5px 10px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
        }

        .operation-links a:first-child:hover {
            text-decoration: underline;
        }

        .operation-links a:nth-child(2) {
            background-color: #FF3030;
            border-radius: 3px;
            padding: 5px 10px;
            color: #fff;
            text-decoration: none;
            display: inline-block;
        }

        .operation-links a:nth-child(2):hover {
            text-decoration: underline;
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;

        }
    </style>
</head>
<body>
<div id="header">
    公司职工管理系统
</div>
<div id="sidebar">
    <a href="index.jsp" onclick="changeActive(this)">首页</a>
    <a href="staff_list" onclick="changeActive(this)" class="active">员工信息管理</a>
    <a href="login.jsp" style="margin-right: auto">退出账户</a>
</div>

<div id="wrap">
    <div id="content">
        <h1>员工信息管理</h1>
        <form action="search" method="Get">
            <label>
                <input type="text" name="keyword" placeholder="输入姓名模糊搜索"/>
            </label>
            <input type="submit" value="搜索"/>
            <input type="button" class="button" value="添加员工" onClick="location='add_staff.jsp'"/>
        </form>
        <table class="table">
            <tr class="table_header">
                <th>编号</th>
                <th>姓名</th>
                <th>职位</th>
                <th>薪水</th>
                <th> 相关操作</th>
            </tr>

            <%
                List<Staff> staff = (List<Staff>) request.getAttribute("staff");
                if (staff != null) {
                    for (Staff e : staff) {
            %>
            <tr class="row1">
                <td><%= e.getId() %>
                </td>
                <td><%= e.getName() %>
                </td>
                <td><%= e.getJob() %>
                </td>
                <td><%= e.getSalary() %>
                </td>
                <td class="operation-links">
                    <a href="delete?id=<%= e.getId() %>"
                       onclick="return confirm('是否删除 (<%= e.getName() %>) 员工?')">删除员工</a>
                    <a href="reload?id=<%= e.getId() %>">修改员工信息</a>
                </td>
            </tr>
            <%
                    }
                }
            %>

        </table>
        <p>&nbsp;</p>
    </div>
</div>
<script>
    function changeActive(element) {
        var sidebarLinks = document.querySelectorAll('#sidebar a');
        for (var i = 0; i < sidebarLinks.length; i++) {
            sidebarLinks[i].classList.remove('active');
        }
        element.classList.add('active');
    }
</script>
</body>
</html>


